<!--  -->
<template>
    <div class="loginBody">
        <header>
            <img class="logo" src="../assets/images/logo.jpg">
        </header>
        <div class="center">
            <div class="left">
                <img src="../assets/images/login.jpg">
            </div>
            <div class="right">
              <h1>
                账号登录
              </h1>
                <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
                    <el-form-item label="" prop="username">
                        <el-input :prefix-icon="User" placeholder="请输入账号" size="large" v-model="ruleForm.username" />
                    </el-form-item>
                    <el-form-item label="" prop="pass">
                        <el-input  :prefix-icon="Lock" placeholder="请输入密码" size="large" type="password" show-password v-model="ruleForm.pass" />
                    </el-form-item>
                    <el-form-item>

                    <div class="verifyCode">
                        <el-form-item label="" prop="verifyCode">
                            <el-input  :prefix-icon="Lock" size="large" placeholder="请输入验证码" v-model="ruleForm.verifyCode" />
                        </el-form-item>
                        <img @click="updateImg" :src="imageCode">
                    </div>

                       

                    </el-form-item>

                    <el-form-item>
                        <el-button class="loginbtn" @click="submit" type="primary">
                            登录
                        </el-button>

                    </el-form-item>
                </el-form>
            </div>
        </div>
        <footer>
            北京乐宁科技@2023 京ICP备17033472号-4
        </footer>
       
    </div>
</template>

<script lang='ts' setup>
import { getImgCode } from '../service/administrator/authCode'
import { LoginData } from '../service/administrator/type';
// import { login } from '../service/administrator/administrator'
import { reactive, toRefs, ref, onMounted, toRaw } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { User,Lock } from '@element-plus/icons-vue'
import { useUserStore } from '../store/user';
// import { login } from '../service/administrator/administrator';

const userStore=useUserStore();
 

const router = useRouter();

const imageCode = ref("");
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<LoginData>({
    username: "",
    pass: "",
    verifyCode: "",
    token: ""
})
const rules = reactive<FormRules<LoginData>>({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    pass: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
    ]
})
//获取图形验证码
const getCode = async () => {

    const res: any = await getImgCode();
    if (res.errCode === 10000) {

        imageCode.value = res.imageCode;
        ruleForm.token = res.token

    }
    console.log(res);

}
//刷新验证码
const updateImg = () => {
    getCode();
}

const submit = async () => {
 
    await ruleFormRef.value?.validate(async (valid, fields) => {
        if (valid) {
            userStore.login(ruleForm).then(res=>{
                router.push("/index");
            },fail=>{
                ElMessage.error(fail.errMsg);
                fail.errCode === 15000 && getCode();
            });
        }
    })

}

onMounted(() => {
    getCode();
})

</script>
<style scoped lang="less">
  /deep/.el-input__inner{
              height: 50px;
            }
            /deep/ .el-form-item{
margin-bottom:25px;
            }
 
.loginBody {
    background: #f7f5f5;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    header {
        height: 100px;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;

        .logo {
            height: 60px;
            width: auto;
            margin-left: 20px;
        }

    }

    footer {
        height: 100px;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .center {
        width: 1190px;
        height: 440px;
        margin: 20px;
        display: flex;

        .left {
            width: 716px;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                display: block;
                
            }
        }

        .right {
            height: 100%;
            flex: 1;
            background: #fff;
            padding:20px 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            h1{
                display: flex;
                justify-content: center;
                font-size: 20px;
                height:80px;
                align-items: center;
               
            }
            
            .verifyCode{
                display: flex;
                img{
                    height: 60px;
                    margin-left: 10px;
                }
            }
            .loginbtn{
                width: 100%;
                display: flex;
                height: 50px;
            }
        }
    }


}
</style>